<script lang="tsx">
import { defineComponent, PropType, Ref, unref, VNode } from 'vue';

export interface TableColumnData {
  type?: 'default' | 'selection' | 'index' | 'expand';
  index?: number | ((index: number) => number);
  label?: string; // 显示的标题
  columnKey?: string;
  hidden?: boolean; // 是否隐藏
  prop?: string; // 字段名称 对应列内容的字段名
  width?: string | number; // 对应列的宽度
  minWidth?: string | number; // 对应列的最小宽度
  fixed?: boolean | 'left' | 'right';
  render?: (scope: { row: any; column: any; $index: number }, val: any) => VNode[];
  slotName?: string; // 插槽名称
  sortable?: boolean | 'custom'; // 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
  showOverflowTooltip?: boolean; // 当内容过长被隐藏时显示 tooltip
  align?: 'left' | 'center' | 'right'; // 对齐方式
  headerAlign?: 'left' | 'center' | 'right'; // 表头对齐方式，若不设置该项，则使用表格的对齐方式
  className?: string; // 列的 className
  labelClassName?: string; // 当前列标题的自定义类名

  [key: string]: any;
}

export default defineComponent({
  name: 'TableColumn',
  props: {
    columns: {
      type: Array as PropType<TableColumnData[]>,
      default() {
        return [];
      },
    },
  },
  setup(props, context) {
    const getColumn = (columns: TableColumnData[] | Ref<TableColumnData[]>) => {
      return unref(columns).map((item) => {
        let {prop, label, render, hidden, slotName, children, ...otherProp} = item;
        if (hidden === true) {
          return;
        }
        return (
          <el-table-column
            {...otherProp}
            label={label}
            prop={prop}
            key={prop}
            v-slots={{
              // 具名插槽
              default: (scope: any) => {
                if (render) {
                  return render(scope, scope.row[prop!]);
                }
                let slot_name = slotName || prop
                if (slot_name) {
                  return context.slots[slot_name]?.(scope);
                }
                return scope.row[prop!];
              },
            }}>
            {children && getColumn(children)}
          </el-table-column>
        );
      });
    };
    return () => getColumn(props.columns);
  },
});
</script>

<style lang="scss" scoped></style>
